/*
 * @Description: 添加、编辑字典项目弹窗通用表格
 * @Author: Rfan
 * @Date: 2022-05-30 11:35:08
 * @LastEditTime: 2022-05-30 11:37:19
 */

import { Form, Input, Radio, Space, Typography } from 'antd';
import classNames from 'classnames/bind';

import styles from '../../../styles/addItemDialog.module.scss';

const cx = classNames.bind(styles);

const stateList = [
  { id: 0, name: '有效', desc: '（字典项可以正常使用）' },
  { id: 1, name: '无效', desc: '（字典项停用）' }
];

const ItemForm = () => {
  return (
    <>
      <Form.Item
        name="name"
        label="名称"
        extra="字典项显示名称，不能重复,如“30年”"
        rules={[{ required: true }]}
      >
        <Input allowClear />
      </Form.Item>
      <Form.Item
        name="code"
        label="代码"
        extra="字典项代码，不能重复，建议使用用数字、字母，如“D30”"
        rules={[{ required: true }]}
      >
        <Input allowClear />
      </Form.Item>
      <Form.Item name="value" label="值" extra="字典项的值，限定为数字，用于处理计算类业务">
        <Input allowClear />
      </Form.Item>
      <Form.Item name="isValid" label="状态">
        <Radio.Group className={cx('state-group')}>
          <Space direction="vertical">
            {stateList.map((item: any) => (
              <div key={item.id} className={cx('state-group__item')}>
                <Radio value={item.id}>{item.name}</Radio>
                <Typography.Text type="secondary">{item.desc}</Typography.Text>
              </div>
            ))}
          </Space>
        </Radio.Group>
      </Form.Item>
      <Form.Item name="remark" label="备注">
        <Input.TextArea placeholder="备注信息描述，最多可填写2000字" maxLength={2000} showCount />
      </Form.Item>
    </>
  );
};

export default ItemForm;
